<template>
  <PageCard :name="$vuetify.lang.t('$vuetify.lang_view_env_csis')">
    <v-card>
      <v-card-title>
        <v-btn color="primary" @click="openAddEnvCsis()">{{ $vuetify.lang.t('$vuetify.lang_menu_new_env_csi') }}</v-btn>
      </v-card-title>
      <v-card-text>
        <v-data-table
          hide-default-footer
          :headers="pageHeaders"
          :items="pageData.envCsis"
          item-key="envCsiName"
          :loading="tableLoading"
          >
          <template v-slot:item.handle="{item}">
            <Operations
                :operations="[
                  {
                    key: 'update',
                    text: $vuetify.lang.t('$vuetify.lang_menu_update_env_csi'),
                    onClick: () => {
                      openUpdateEnvCsis(item)
                    }
                  },
                  {
                    key: 'copy',
                    text: $vuetify.lang.t('$vuetify.lang_menu_copy_env_csi'),
                    onClick: () => {
                      openCopyEnvCsis(item)
                    }
                  },
                  {
                    key: 'delete',
                    text: $vuetify.lang.t('$vuetify.lang_menu_delete_env_csi'),
                    onClick: () => {
                      openDeleteEnvCsis(item.envCsiName)
                    }
                  },
                ]"
              ></Operations>
          </template>
        </v-data-table>
      </v-card-text>
    </v-card>
    <v-dialog
      v-model="YAMLDialog"
      max-width="1200px"
      persistent
      eager
    >
      <v-card>
        <v-card-title>
          <span class="headline">{{$vuetify.lang.t('$vuetify.lang_menu_def_view_yaml')}}</span>
        </v-card-title>
        <v-card-text>
          <Monaco
            ref="monaco"
            :monacoOptions="singleMonacoOptions"
            :height="500"
          ></Monaco>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="blue darken-1"
            text
            @click="closeYaml()"
          >
            {{ $vuetify.lang.t('$vuetify.lang_menu_confirm') }}
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog
      v-model="addEnvCsisDialog"
      max-width="1200px"
      persistent
    >
      <v-card>
        <v-card-title>
          <span class="headline">{{$vuetify.lang.t('$vuetify.lang_form_new_env_csi')}}</span>
          <v-spacer></v-spacer>
          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn class="yaml-btn" small v-bind="attrs" v-on="on" @click="previewAddEnvCsis()">
                <v-icon color="primary">mdi-cube-scan</v-icon>
              </v-btn>
            </template>
            <div>{{$vuetify.lang.t('$vuetify.lang_menu_def_view_yaml')}}</div>
          </v-tooltip>
          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-icon color="green" class="ml-2" v-bind="attrs" v-on="on" @click="addEnvCsis()">mdi-progress-check</v-icon>
            </template>
            <div>{{$vuetify.lang.t('$vuetify.lang_menu_def_confirm_change')}}</div>
          </v-tooltip>
          <v-icon class="ml-4" @click="() => {
            this.addEnvCsisDialog = false
          }">
            mdi-close
          </v-icon>
        </v-card-title>
        <v-card-text>
          <v-form ref="addEnvCsisRef">
            <v-alert icon="mdi-alert-circle" prominent text type="info">
              <small>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_prompt')}}</small>
            </v-alert>
            <div class="d-flex mt-4 justify-space-between">
              <div class="form-item-45 d-flex align-center">
                <v-text-field
                  :label="$vuetify.lang.t('$vuetify.lang_form_env_csi_name')"
                  dense
                  v-model="addEnvCsisForm.envCsiName"
                  :rules="[v => !!v || $vuetify.lang.t('$vuetify.lang_form_required')]"
                  :hint="$vuetify.lang.t('$vuetify.lang_form_env_csi_name_tip_1')"
                  persistent-hint
                />
              </div>
              <div class="form-item-45 d-flex align-center">
                <v-textarea
                  :label="$vuetify.lang.t('$vuetify.lang_form_env_csi_params')"
                  auto-grow
                  v-model="addEnvCsisForm.envCsiParams"
                  dense
                  rows="1"
                  style="white-space:nowrap;"
                  wrap="off"
                  row-height="12"
                  :messages="[
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_1'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_2'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_3'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_4'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_5'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_6'),
                  ]"
                >
                  <template v-slot:message>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_1')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_2')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_3')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_4')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_5')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_6')}}</div>
                  </template>
                </v-textarea>
              </div>
            </div>
            <div class="d-flex mt-4 justify-space-between">
              <div class="form-item-45 d-flex align-center">
                <v-textarea
                  :label="$vuetify.lang.t('$vuetify.lang_form_env_csi_pv')"
                  auto-grow
                  v-model="addEnvCsisForm.envCsiPv"
                  dense
                  rows="1"
                  style="white-space:nowrap;"
                  wrap="off"
                  row-height="12"
                  :messages="[
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_1'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_2'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_3'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_4'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_5'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_6'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_7'),
                  ]"
                >
                  <template v-slot:message>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_1')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_2')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_3')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_4')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_5')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_6')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_7')}}</div>
                  </template>
                </v-textarea>
              </div>
              <div class="form-item-45 d-flex align-center">
                <v-textarea
                  :label="$vuetify.lang.t('$vuetify.lang_form_env_csi_pvc')"
                  auto-grow
                  v-model="addEnvCsisForm.envCsiPvc"
                  dense
                  rows="1"
                  style="white-space:nowrap;"
                  wrap="off"
                  row-height="12"
                  :messages="[
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_1'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_2'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_3'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_4'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_5'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_6'),
                  ]"
                >
                  <template v-slot:message>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_1')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_2')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_3')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_4')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_5')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_6')}}</div>
                  </template>
                </v-textarea>
              </div>
            </div>
          </v-form>
        </v-card-text>
      </v-card>
    </v-dialog>
    <v-dialog
      v-model="updateEnvCsisDialog"
      max-width="1200px"
      persistent
    >
      <v-card>
        <v-card-title>
          <span class="headline">{{$vuetify.lang.t('$vuetify.lang_form_update_env_csi', updateEnvCsisForm.envCsiName)}}</span>
          <v-spacer></v-spacer>
          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn class="yaml-btn" small v-bind="attrs" v-on="on" @click="previewUpdateEnvCsis()">
                <v-icon color="primary">mdi-cube-scan</v-icon>
              </v-btn>
            </template>
            <div>{{$vuetify.lang.t('$vuetify.lang_menu_def_view_yaml')}}</div>
          </v-tooltip>
          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-icon color="green" class="ml-2" v-bind="attrs" v-on="on" @click="updateEnvCsis()">mdi-progress-check</v-icon>
            </template>
            <div>{{$vuetify.lang.t('$vuetify.lang_menu_def_confirm_change')}}</div>
          </v-tooltip>
          <v-icon class="ml-4" @click="() => {
            this.updateEnvCsisDialog = false
          }">
            mdi-close
          </v-icon>
        </v-card-title>
        <v-card-text>
          <v-form ref="updateEnvCsisRef">
            <v-alert icon="mdi-alert-circle" prominent text type="info">
              <small>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_prompt')}}</small>
              <div v-if="updateEnvCsisForm.isFromFile"><small>{{$vuetify.lang.t('$vuetify.lang_form_is_from_file_prompt')}}</small></div>
            </v-alert>
            <div class="d-flex mt-4 justify-space-between">
              <div class="form-item-45 d-flex align-center">
                <v-text-field
                  :label="$vuetify.lang.t('$vuetify.lang_form_env_csi_name')"
                  dense
                  disabled
                  v-model="updateEnvCsisForm.envCsiName"
                  :rules="[v => !!v || $vuetify.lang.t('$vuetify.lang_form_required')]"
                  :hint="$vuetify.lang.t('$vuetify.lang_form_env_csi_name_tip_1')"
                  persistent-hint
                />
              </div>
              <div class="form-item-45 d-flex align-center">
                <v-textarea
                  :label="$vuetify.lang.t('$vuetify.lang_form_env_csi_params')"
                  auto-grow
                  v-model="updateEnvCsisForm.envCsiParams"
                  dense
                  rows="1"
                  style="white-space:nowrap;"
                  wrap="off"
                  row-height="12"
                  :messages="[
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_1'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_2'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_3'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_4'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_5'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_6'),
                  ]"
                >
                  <template v-slot:message>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_1')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_2')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_3')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_4')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_5')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_params_tip_6')}}</div>
                  </template>
                </v-textarea>
              </div>
            </div>
            <div class="d-flex mt-4 justify-space-between">
              <div class="form-item-45 d-flex align-center">
                <v-textarea
                  :label="$vuetify.lang.t('$vuetify.lang_form_env_csi_pv')"
                  auto-grow
                  v-model="updateEnvCsisForm.envCsiPv"
                  dense
                  rows="1"
                  style="white-space:nowrap;"
                  wrap="off"
                  row-height="12"
                  :messages="[
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_1'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_2'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_3'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_4'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_5'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_6'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_7'),
                  ]"
                >
                  <template v-slot:message>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_1')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_2')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_3')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_4')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_5')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_6')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pv_tip_7')}}</div>
                  </template>
                </v-textarea>
              </div>
              <div class="form-item-45 d-flex align-center">
                <v-textarea
                  :label="$vuetify.lang.t('$vuetify.lang_form_env_csi_pvc')"
                  auto-grow
                  v-model="updateEnvCsisForm.envCsiPvc"
                  dense
                  rows="1"
                  style="white-space:nowrap;"
                  wrap="off"
                  row-height="12"
                  :messages="[
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_1'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_2'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_3'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_4'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_5'),
                    $vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_6'),
                  ]"
                >
                  <template v-slot:message>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_1')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_2')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_3')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_4')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_5')}}</div>
                    <div>{{$vuetify.lang.t('$vuetify.lang_form_env_csi_pvc_tip_6')}}</div>
                  </template>
                </v-textarea>
              </div>
            </div>
          </v-form>
        </v-card-text>
      </v-card>
    </v-dialog>
    <v-dialog
      v-model="deleteEnvCsisDialog"
      max-width="600px"
      persistent
    >
      <v-card>
        <v-card-title>
          <span class="headline">{{$vuetify.lang.t('$vuetify.lang_form_delete_env_csi', targetEnvCsiName)}}</span>
        </v-card-title>
        <v-card-text>
          <v-form ref="deleteEnvCsisRef">
            <v-alert icon="mdi-alert-circle" prominent text type="error">
              <small>{{$vuetify.lang.t('$vuetify.lang_form_delete_env_csi', targetEnvCsiName)}}<v-chip small color="red">{{$vuetify.lang.t('$vuetify.lang_form_dangerous_operation')}}</v-chip></small>
            </v-alert>
            <v-container>
              <v-row>
                <v-col cols="12">
                  <v-text-field
                    :label="$vuetify.lang.t('$vuetify.lang_form_delete_env_csi_env_csi_name')"
                    required
                    dense
                    v-model="confirmValue"
                    :rules="[v => !!v || $vuetify.lang.t('$vuetify.lang_form_required')]"
                    :hint="$vuetify.lang.t('$vuetify.lang_form_delete_env_csi_env_csi_name_tip_1', targetEnvCsiName)"
                    persistent-hint
                  ></v-text-field>
                </v-col>
              </v-row>
            </v-container>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="blue darken-1"
            text
            @click="() => {
              this.deleteEnvCsisDialog = false
              this.$refs.deleteEnvCsisRef.reset()
            }"
          >
            {{ $vuetify.lang.t('$vuetify.lang_menu_cancel') }}
          </v-btn>
          <v-btn
            color="blue darken-1"
            text
            @click="deleteEnvCsis()"
          >
            {{ $vuetify.lang.t('$vuetify.lang_menu_confirm') }}
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </PageCard>
</template>

<script>
import PageCard from '@/lib/ui-lib/page-templates/PageCard';
import Operations from '@/lib/ui-lib/components/Operations';
import request from '@/utils/request';
import YAML from "yamljs";
import Monaco from "@/lib/monaco/Monaco";
import {vuetify} from '@/plugins/vuetify'
export default {
  name: 'EnvCsis',
  components: {
    PageCard,
    Operations,
    Monaco
  },
  inject: ['successTip', 'errorTip', 'warnTip'],
  data () {
    return {
      intRule: v => {
        if (v === '') {
          return vuetify.preset.lang.t('$vuetify.lang_form_required')
        } else {
          if (isNaN(parseInt(v))) {
            return vuetify.preset.lang.t('$vuetify.lang_form_must_be_integer')
          } else if (v.toString().includes('.')) {
            return vuetify.preset.lang.t('$vuetify.lang_form_must_be_integer')
          } else if (v < 1) {
            return vuetify.preset.lang.t('$vuetify.lang_form_must_greater_than_0')
          }
          return true
        }
      },
      intRuleZero: v => {
        if (v === '') {
          return vuetify.preset.lang.t('$vuetify.lang_form_required')
        } else {
          if (isNaN(parseInt(v))) {
            return vuetify.preset.lang.t('$vuetify.lang_form_must_be_integer')
          } else if (v.toString().includes('.')) {
            return vuetify.preset.lang.t('$vuetify.lang_form_must_be_integer')
          } else if (v < 0) {
            return vuetify.preset.lang.t('$vuetify.lang_form_can_not_less_than_0')
          }
          return true
        }
      },
      intRuleMinusOne: v => {
        if (v === '') {
          return vuetify.preset.lang.t('$vuetify.lang_form_required')
        } else {
          if (isNaN(parseInt(v))) {
            return vuetify.preset.lang.t('$vuetify.lang_form_must_be_integer')
          } else if (v.toString().includes('.')) {
            return vuetify.preset.lang.t('$vuetify.lang_form_must_be_integer')
          } else if (v < -1) {
            return vuetify.preset.lang.t('$vuetify.lang_form_can_not_less_than__1')
          }
          return true
        }
      },
      userObj: {},
      confirmValue: '',
      addEnvCsisDialog: false,
      addEnvCsisForm: {
        envCsiName: '',
        envCsiPv: '',
        envCsiPvc: '',
        envCsiParams: '',
      },
      updateEnvCsisForm: {
        envCsiName: '',
        envCsiPv: '',
        envCsiPvc: '',
        envCsiParams: '',
      },
      updateEnvCsisDialog: false,
      YAMLDialog: false,
      yamlText: "",
      pageData: {
        envCsis: [],
      },
      tableLoading: false,
      targetEnvCsiName: '',
      deleteEnvCsisDialog: false,
      singleMonacoOptions: {
        value: '',
        automaticLayout:true,
        readOnly: true,
        theme: "vs-dark",
        language: "yaml"
      },
      markdownMonacoOptions: {
        value: '',
        automaticLayout: true,
        readOnly: true,
        theme: "vs-dark",
        language: "markdown"
      },
    }
  },
  created () {
    const vm = this
    vm.userObj = JSON.parse(localStorage.getItem('userObj'))
    vm.getList(false)
  },
  methods: {
    getList(tipFlag) {
      const vm = this
      vm.tableLoading = true
      request.get('/admin/envCsis').then(response => {
        vm.pageData.envCsis = response.data.envCsis
        vm.tableLoading = false
        if(tipFlag){
          vm.successTip(true,response.msg)
        }
      }).catch(error => {
        vm.errorTip(true,error.response.data.msg)
      })
    },
    closeYaml() {
      const vm = this;
      vm.$refs.monaco.monacoEditor.setValue('')
      vm.YAMLDialog = false;
    },
    previewAddEnvCsis() {
      const vm = this
      if(vm.$refs.addEnvCsisRef.validate()){
        let copyData = JSON.parse(JSON.stringify(vm.addEnvCsisForm))
        vm.yamlText = YAML.stringify(copyData, 4)
        vm.$refs.monaco.monacoEditor.setValue(vm.yamlText)
        vm.YAMLDialog =true
      }else{
        vm.warnTip(true, vuetify.preset.lang.t('$vuetify.lang_tip_please_check_all_input_is_correct'))
      }
    },
    openAddEnvCsis() {
      const vm = this
      vm.addEnvCsisDialog = true
    },
    addEnvCsis() {
      const vm = this
      if(vm.$refs.addEnvCsisRef.validate()){
        request.post('/admin/envCsi', vm.addEnvCsisForm).then(response => {
          vm.successTip(true,response.msg)
          vm.addEnvCsisDialog = false
          vm.getList(false)
        }).catch(error => {
          vm.errorTip(true,error.response.data.msg)
        })
      }else{
        vm.warnTip(true, vuetify.preset.lang.t('$vuetify.lang_tip_please_check_all_input_is_correct'))
      }
    },
    previewUpdateEnvCsis() {
      const vm = this
      if(vm.$refs.updateEnvCsisRef.validate()){
        let copyData = JSON.parse(JSON.stringify(vm.updateEnvCsisForm))
        vm.yamlText = YAML.stringify(copyData, 4)
        vm.$refs.monaco.monacoEditor.setValue(vm.yamlText)
        vm.YAMLDialog =true
      }else{
        vm.warnTip(true, vuetify.preset.lang.t('$vuetify.lang_tip_please_check_all_input_is_correct'))
      }
    },
    openCopyEnvCsis(envCsi) {
      const vm = this
      vm.addEnvCsisDialog = true
      vm.addEnvCsisForm = { ...envCsi }
    },
    openUpdateEnvCsis(envCsi) {
      const vm = this
      vm.updateEnvCsisForm = envCsi
      vm.updateEnvCsisDialog = true
    },
    updateEnvCsis() {
      const vm = this
      if(vm.$refs.updateEnvCsisRef.validate()){
        request.post(`/admin/envCsi/${vm.updateEnvCsisForm.envCsiName}`, vm.updateEnvCsisForm).then(response => {
          vm.successTip(true,response.msg)
          vm.updateEnvCsisDialog = false
          vm.getList(false)
        }).catch(error => {
          vm.errorTip(true,error.response.data.msg)
        })
      }else{
        vm.warnTip(true, vuetify.preset.lang.t('$vuetify.lang_tip_please_check_all_input_is_correct'))
      }
    },
    openDeleteEnvCsis(envCsiName) {
      const vm = this
      vm.confirmValue = ''
      vm.targetEnvCsiName = envCsiName
      vm.deleteEnvCsisDialog = true
    },
    deleteEnvCsis() {
      const vm = this
      if(vm.$refs.deleteEnvCsisRef.validate && vm.targetEnvCsiName === vm.confirmValue){
        request.delete(`/admin/envCsi/${vm.targetEnvCsiName}`).then(response => {
          vm.successTip(true,response.msg)
          vm.deleteEnvCsisDialog = false
          vm.getList(false)
        }).catch(error => {
          vm.errorTip(true,error.response.data.msg)
        })
      }else{
        vm.warnTip(true, vuetify.preset.lang.t('$vuetify.lang_form_input_value_to_confirm', vm.targetEnvCsiName))
      }
    },
  },
  computed: {
    pageHeaders () {
      return [
        { text: vuetify.preset.lang.t('$vuetify.lang_view_env_csi_name'), value: 'envCsiName', sortable: false },
        { text: vuetify.preset.lang.t('$vuetify.lang_view_env_csi_driver'), value: 'envCsiDriver', sortable: false },
        { text: vuetify.preset.lang.t('$vuetify.lang_view_is_from_file'), value: 'isFromFile', sortable: false },
        { text: vuetify.preset.lang.t('$vuetify.lang_view_operations'), value: 'handle', sortable: false },
      ]
    },
  }
}
</script>

<style lang="scss" scoped>
.steps-switch {
  width: 50%;
}
.form-item-15 {
  width: 15%;
}
.form-item-20 {
  width: 20%;
}
.form-item {
  width: 30%;
}
.form-item-40 {
  width: 40%;
}
.form-item-45 {
  width: 45%;
}
.form-item-60 {
  width: 60%;
}
.form-item-70 {
  width: 70%;
}
.form-item-100 {
  width: 100%;
}
.yaml-btn {
  background-color: #fff !important;
  box-shadow: none !important;
}
.yaml-btn:hover::before {
  opacity: 0 !important;
}
.pr-20 {
  padding-right: 80px;
}
.tip-color {
  color: rgba(0, 0, 0, 0.6);
}
.error-text {
  font-size: 16px;
  font-weight: 400;
  color: #ff5252;
}
.params-item {
  padding: 8px;
  border: 1px solid #d2c7c7;
  border-radius: 5px;
  margin-bottom: 16px;
}
</style>
